<template>
	<view>
		<canvas :canvas-id="CanvasID" :style="{ width: canvasW + 'px', height: canvasH + 'px' }"></canvas>
	</view>
</template>

<script>
	var _this;
export default {
	name: 'wm-poster',
	props: {
		CanvasID:{		//CanvasID 等同于 canvas-id
			Type:String,
			default:'PosterCanvas'
		},
		imgSrc:{		//展示图
			Type:String,
			default:''
		},
		QrSrc:{			//二维码
			Type:String,
			default:''
		},
		Title:{			//文本内容
			Type:String,
			default:''
		},
		TitleColor:{	//标题颜色
			Type:String,
			default:'#333333'
		},
		LineType:{		//标题显示行数		（注超出2行显示会导致画布布局絮乱）
			Type:[String,Boolean],
			default:true
		},
		PriceTxt:{		//价格值
			Type:String,
			default:'99.99'
		},
		PriceColor:{	//价格颜色
			Type:String,
			default:'#FF4100'
		},
		OriginalTxt:{	//原价值
			Type:String,
			default:'199.99'
		},
		OriginalColor:{	//默认颜色（如原价与扫描二维码颜色）
			Type:String,
			default:'#999999'
		},
		Width:{			//画布宽度  (高度根据图片比例计算 单位upx)
			Type:String,
			default:750
		},
		CanvasBg:{		//canvas画布背景色
			Type:String,		
			default:'#ffffff'
		},
		Referrer:{		//推荐人信息
			Type:String,
			default:'quitter推荐给你'
		},
		ViewDetails:{	//描述提示文字
			Type:String,
			default:'长按或扫描识别二维码'
		}
	},
	data() {
		return {
			canvasW:0,
			canvasH: 0,
			canvasImgSrc:'',
			ctx:null
		};
	},
	methods: {
		async OnCanvas() {
			_this.ctx = uni.createCanvasContext(_this.CanvasID,this);
			const C_W = uni.upx2px(_this.Width), //canvas宽度
				C_P = uni.upx2px(30), //canvas Paddng 间距
				C_Q = uni.upx2px(150); //二维码或太阳码宽高
			let _strlineW = 0; //文本宽度
			let _imgInfo = await _this.getImageInfo({ imgSrc: _this.imgSrc }); //广告图
			let _QrCode = await _this.getImageInfo({ imgSrc: _this.QrSrc }); //二维码或太阳码
			let r = [_imgInfo.width, _imgInfo.height];
			let q = [_QrCode.width, _QrCode.height];
			let imgW = C_W - C_P * 2;
			if (r[0] != imgW) {
				r[1] = Math.floor((imgW / r[0]) * r[1]);
				r[0] = imgW;
			}
			if (q[0] != C_Q) {
				q[1] = Math.floor((C_Q / q[0]) * q[1]);
				q[0] = C_Q;
			}
			_this.canvasW = C_W;
			_this.canvasH = r[1] + q[1] + 128;
			_this.ctx.setFillStyle(_this.CanvasBg); //canvas背景颜色
			_this.ctx.fillRect(0, 0, C_W, _this.canvasH); //canvas画布大小
			
			//添加图片展示
			_this.ctx.drawImage(_imgInfo.path, C_P, C_P, r[0], r[1]);
			//添加图片展示 end

			//设置文本
			 _this.ctx.font = 'normal bold 36px Arial,sans-serif '
			 _this.ctx.setFontSize(uni.upx2px(32)); //设置标题字体大小
			 _this.ctx.setFillStyle(_this.TitleColor); //设置标题文本颜色
			let _strLastIndex = 0; //每次开始截取的字符串的索引
			let _strHeight = r[1] + C_P * 2 + 10; //绘制字体距离canvas顶部的初始高度
			let _num=1;
			for (let i = 0; i < _this.Title.length; i++) {
				_strlineW += _this.ctx.measureText(_this.Title[i]).width;
				if (_strlineW > r[0]) {
					if(_num == 2&&_this.LineType){
						//文字换行数量大于二进行省略号处理
						_this.ctx.fillText(_this.Title.substring(_strLastIndex, i-8)+'...', C_P, _strHeight);
						_strlineW = 0;
						_strLastIndex = i;
						_num++;
						break;
					}else{
						_this.ctx.fillText(_this.Title.substring(_strLastIndex, i), C_P, _strHeight);
						_strlineW = 0;
						_strHeight += 20;
						_strLastIndex = i;
						_num++;
					}
				}else if (i == _this.Title.length - 1) {
					// _this.ctx.fillText(_this.Title.substring(_strLastIndex, i + 1), C_P, _strHeight);
					_this.ctx.fillText(_this.Title.substring(_strLastIndex, i + 1), C_P, _strHeight+40);
					_strlineW = 0;
				}
			}
			//设置文本 end

			//设置价格
			_strlineW = C_P;
			_strHeight += uni.upx2px(60);
			if(_num==1){
				_strHeight += 20;	//单行标题时占位符
			}
			
			if(_this.PriceTxt !=''){	//判断是否有销售价格
				_this.ctx.setFillStyle(_this.PriceColor);
				_this.ctx.setFontSize(uni.upx2px(38));
				_this.ctx.fillText(_this.PriceTxt, _strlineW, _strHeight-50); //商品价格
				_strlineW += _this.ctx.measureText(_this.PriceTxt).width + uni.upx2px(10);
			}
			if(_this.PriceTxt !='' && _this.OriginalTxt !=''){	//判断是否有销售价格且原价
				_this.ctx.setFillStyle(_this.OriginalColor);
				_this.ctx.setFontSize(uni.upx2px(24));
				_this.ctx.fillText(_this.OriginalTxt, _strlineW, _strHeight-50); //商品原价
			}
			_this.ctx.strokeStyle = _this.OriginalColor;
			_this.ctx.moveTo(_strlineW, _strHeight-50 - uni.upx2px(10)); //起点
			_this.ctx.lineTo(_strlineW + _this.ctx.measureText(_this.OriginalTxt).width, _strHeight-50 - uni.upx2px(10)); //终点
			_this.ctx.stroke();
			//设置价格 end

			//添加二维码
			_strHeight += uni.upx2px(20);
			_this.ctx.drawImage(_QrCode.path, r[0] - q[0] + C_P, _strHeight, q[0], q[1]);
			//添加二维码 end

			//添加推荐人与描述
			_this.ctx.setFillStyle(_this.TitleColor);
			_this.ctx.setFontSize(uni.upx2px(30));
			_this.ctx.fillText(_this.Referrer, C_P+60, _strHeight + q[1] / 2+5);
			_strHeight += uni.upx2px(25);
			_this.roundRect(_this.ctx,C_P, _strHeight, 50,50,25)
			_this.ctx.drawImage(_QrCode.path,C_P, _strHeight, 50,50);
			//添加推荐人与描述 end
			
			//延迟后渲染至canvas上
			setTimeout(function() {
				_this.ctx.draw(true,(ret)=>{
					_this.getNewImage();
				});
			}, 600);
		},
		roundRect(ctx, x, y, w, h, r) {
			// 开始绘制
			ctx.beginPath()
			// 因为边缘描边存在锯齿，最好指定使用 transparent 填充
			// 这里是使用 fill 还是 stroke都可以，二选一即可
			ctx.setFillStyle('#f94335')
			// ctx.setStrokeStyle('transparent')
			// 左上角
			ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5)
		
			// border-top
			ctx.moveTo(x + r, y)
			ctx.lineTo(x + w - r, y)
			ctx.lineTo(x + w, y + r)
			// 右上角
			ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2)
		
			// border-right
			ctx.lineTo(x + w, y + h - r)
			ctx.lineTo(x + w - r, y + h)
			// 右下角
			ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5)
		
			// border-bottom
			ctx.lineTo(x + r, y + h)
			ctx.lineTo(x, y + h - r)
			// 左下角
			ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI)
		
			// border-left
			ctx.lineTo(x, y + r)
			ctx.lineTo(x + r, y)
		
			// 这里是使用 fill 还是 stroke都可以，二选一即可，但是需要与上面对应
			ctx.fill()
			// ctx.stroke()
			ctx.closePath()
			// 剪切
			ctx.clip()
		},
		async getImageInfo({ imgSrc }) {
			return new Promise((resolve, errs) => {
				uni.getImageInfo({
					src: imgSrc,
					success: function(image) {
						resolve(image);
					},
					fail(err) {
						errs(err);
					}
				});
			});
		},
		getNewImage(){
			let that=this
			uni.canvasToTempFilePath({
				canvasId: _this.CanvasID,
				quality: 1,
				complete: (res) => {
					// console.log(res.tempFilePath);
					that.$parent.$parent.image=res.tempFilePath;
					_this.$emit('success',res);
				}
			},this);
		}
		
	},
	mounted() {
		_this = this;
		_this.OnCanvas();
	}
};
</script>

<style></style>
